<template>
  <el-container>
    <el-header>
      <div class="BIshow">
        <div class="box">
          <toppie />
        </div>
        <div class="box">

        </div>
        <div class="box">

        </div>
      </div>
    </el-header>

    <el-main class="report_nopadding">
      <scTable ref="table" :data="list" row-key="id" stripe style="height: 450px;">
        <el-table-column label="数据库名称" prop="table_name" width="250"></el-table-column>
        <!-- <el-table-column label="状态" prop="status" width="150"></el-table-column> -->
        <el-table-column label="规则" prop="rule_text" width="450"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="100">
          <template #default="scope">
            <el-button-group>
              <!-- <el-button text type="primary" size="small">查看</el-button> -->
              <el-button text type="primary" size="small" @click="table_show(scope.row)">详情</el-button>
              <!-- <el-button text type="primary" size="small">删除</el-button> -->
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启用/停用" fixed="right" align="right" width="90">
          <template #default="scope">
            <el-switch v-model="scope.row.status" />
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <el-pagination background layout="prev, pager, next ,total,sizes" :total="total" />
  </el-container>
  <el-drawer v-model="dialog.info" :size="800" title="详细" direction="rtl" destroy-on-close>
    <info ref="infoDialog"></info>
  </el-drawer>
</template>

<script>
import saveDialog from '../view/save'
import info from '../view/info'
import * as index from './../../../api/model/table'
import toppie from '../BIbox/borderBox1/TopPie.vue'
export default {
  name: 'listTree',
  components: {
    saveDialog,
    info,
    toppie
  },
  data() {
    return {
      groupFilterText: "",
      list: [],
      status: "",
      dialog: {
        save: false,
        info: false
      },
      search: {
        keyword: ""
      },
      value1: true,
      total: 0
    }
  },
  setup() {
  },
  watch: {
    groupFilterText(val) {
      this.$refs.group.filter(val);
    },
    list() {
      this.total = this.list.length
    }
  },
  mounted() {
    this.total = this.list.length
  },
  created() {
    this.table();
  },
  methods: {
    table() {
      index.getRules().then((response) => {
        this.list = response.data.data;
        // if(this.list.status = )
      }).catch(function (error) {
        console.log(error)
      })
    },
    table_show(row) {
      this.dialog.info = true
      this.$nextTick(() => {
        this.$refs.infoDialog.setData(row)
      })
    },
    //树过滤
    groupFilterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //树点击事件
    groupClick(data) {
      var params = {
        groupId: data.id
      }
      this.$refs.table.reload(params)
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search)
    },
    add() {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    }
  }
}
</script>

<style>
.report_nopadding {
  margin-top: 5%;
  height: 100%;
}

.BIshow {
  /* background-color: rgb(216, 216, 216); */
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.box {
  background-color: #fff;
  border: 1px solid rgb(228, 228, 228);
  width: 390px;
  height: 120px;
}
</style>
